:global{
    .topology-level{
        text-align: center;
        white-space: nowrap;

        &.topology-level-1{
            > .topology-item{
                > .topology-label{
                    &:before{
                        display: none;
                        margin-top: 0;
                    }
                }
            }
        }
    }
    .topology-item{
        display: inline-block;
        vertical-align: top;
        position: relative;
        border-top: 1px solid #ccc;
        //padding-top: 30px;
        //padding-left: 24px;
        padding: 30px 12px 0;

        &:first-child{
            padding-left: 0;
        }
        &:last-child{
            padding-right: 0;

            > .topology-label {
                > .topology-label-wrap {
                    > .topology-sub-children {
                        &:before {
                            content: '';
                            position: absolute;
                            width: 100%;
                            height: 1px;
                            background: #fff;
                            top: -44px;
                            left: 0;
                        }
                    }
                }
            }
        }
        &.topology-item-only-children {
            padding-right: 0 !important;
        }
    }

    .topology-bottom-line{
        content: '';
        position: absolute;
        bottom: -30px;
        left: 50%;
        width: 1px;
        height: 30px;
        background: #ccc;
    }
    .topology-cover-left-line{
        position: absolute;
        left: 0;
        top: -32px;
        width: 50%;
        height: 3px;
        background: #fff;
    }
    .topology-cover-right-line{
        position: absolute;
        right: -1px;
        top: -32px;
        width: 50%;
        height: 3px;
        background: #fff;
    }
    .topology-label{
        position: relative;

        .topology-label-wrap{
            border: 1px solid #ccc;
            padding: 8px;
            display: inline-block;
            position: relative;
            vertical-align: middle;

            > .topology{
                padding: 24px;
                > .topology-level{
                    > .topology-item{
                        border-top: none;
                    }
                }
            }
        }

        // 上竖线
        &:before{
            content: '';
            position: absolute;
            left: 50%;
            width: 1px;
            height: 31px;
            top: -31px;
            background: #ccc;
        }
    }
    .topology-level-4 {
        .topology-label-wrap {
            > div {
                > div:first-child {
                    background: rgba(0, 0, 0, 0.03);
                    color: rgba(0, 0, 0, 0.85);
                }
            }
        }
    }
    .topology-children {
        position: relative;
        padding-top: 30px;
        //border-top: 1px solid #ccc;
        //margin-top: 30px;

        //&:before{
        //    content: '';
        //    position: absolute;
        //    top: -31px;
        //    left: 50%;
        //    width: 1px;
        //    height: 30px;
        //    background: #ccc;
        //}
    }
    .topology-sub-children{
        display: inline-block;
        vertical-align: top;
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-30px);
        padding-bottom: 24px;
        padding-left: 30px;

        .topology-sub-children-left-line{
            content:'';
            position: absolute;
            width: 60px;
            height: 1px;
            background: #ccc;
            left: 0;
            top: 29px;
        }
    }
    .topology-sub-item{
        height: 30px;
        line-height: 30px;
        padding-left: 12px;
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
        //margin-left: 30px;
        text-align: left;
        cursor: pointer;

        &:first-child{
            border-left: none;
        }
        :hover {
            color: #ffa22d;
        }
    }
    .topology-btn{
        position: absolute;
        bottom: -20px;
        z-index: 1;
        background: #fff;
        cursor: pointer;
        left: 50%;
        transform: translateX(-50%);
    }
    .topology-right-btn{
        position: absolute;
        top: 50%;
        right: -20px;
        background: #fff;
        z-index:1;
        cursor: pointer;
        transform: translateY(-7px);
    }
    .topology-level-top-line{
        width: 0;
        height: 1px;
        background: #ccc;
        position: absolute;
        right: 0;
        top: 29px;
        display: none;
    }
    .topology-item-collapsed{
        > .topology-children{
            display: none;
        }
        > .topology-label{
            > .topology-label-bottom-line{
                display: none;
            }
            > .topology-label-wrap{
                > .topology-plus-btn{
                    display: block;
                }
                > .topology-minus-btn{
                    display: none;
                }
            }
        }
    }
    .topology-item-expanded{
        > .topology-children{
            display: block;
        }
        > .topology-label{
            > .topology-label-bottom-line{
                display: block;
            }
            > .topology-label-wrap{
                > .topology-plus-btn{
                    display: none;
                }
                > .topology-minus-btn{
                    display: block;
                }
            }
        }
    }
    .topology-item-r-expanded {
        > .topology-label {
            > .topology-label-wrap {
                > .topology-right-plus-btn {
                    display: none;
                }
                > .topology-right-minus-btn {
                    display: block;
                }
                > .topology-sub-children{
                    display: inline-block;
                }
            }
        }
    }
    .topology-item-r-collapsed{
        > .topology-label{
            > .topology-label-wrap{
                .topology-right-plus-btn{
                    display: block;
                }
                > .topology-right-minus-btn {
                    display: none;
                }
                > .topology-sub-children{
                    display: none;
                }
            }
        }
    }
    .topology-label-bottom-line{
        position: absolute;
        left: 50%;
        width: 1px;
        height: 30px;
        background: #ccc;
    }
    .topology-level-1{
        > .topology-item{
            border-top: none;
            padding: 0;
        }
    }
    .topology-item-is-group {
        > .topology-label {
            > .topology-label-wrap {
                // background: rgba(255,162,45,0.04);
                border: 1px dashed rgba(255, 162, 45, 1);
            }
        }
    }
    .inner-topology{
        .topology-item-is-group{
            > .topology-label{
                > .topology-label-wrap{
                    background: inherit;
                    border: 1px solid #ccc;
                }
            }
        }
        .topology-item-is-company {
            > .topology-label {
                > .topology-label-wrap {
                    border: none !important;
                    background: #ffe4c2 !important;
                }
            }
        }
    }
    .topology-children-is-employee{
        > .topology-children{
            left: 50%;
            .topology-level{
                border-left: 1px solid #ccc;
                text-align: left;
            }
            .topology-item{
                display: block;
                padding: 0;
                border-top: none;
                .topology-label{
                    &:before{
                        display: none;
                    }
                    .topology-cover-left-line{
                        display: none;
                    }
                }
                .topology-label-wrap{
                    padding: 0;
                    border: none;
                }
            }
        }
    }
    .topology-plus-btn,
    .topology-minus-btn,
    .topology-right-minus-btn {
        &:hover {
            opacity: 0.75;
        }
    }
}
